<template>
    <a-modal
            title="导出"
            :visible="visible"
            :width="'600px'"
            @ok="handleOk"
            @cancel="visible=false"
            :confirmLoading="confirmLoading"
    >
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
            全部
        </a-checkbox>
        <a-checkbox-group
                v-model="checkboxData"
                class="xlSearch-group"
                @change="onChange"
        >
            <a-row>
                <a-col :span="8" v-for="(item,index) in formData" :key="index"><a-checkbox :value="item.dataIndex">{{item.title}}</a-checkbox></a-col>
            </a-row>
        </a-checkbox-group>
    </a-modal>
</template>

<script>
    export default {
        name: "importExcel",
        data(){
            return{
                checkboxData:[],
                queryModel:'',
                visible:false,
                confirmLoading:false,
                formData:[],
                checkAll:false,
                indeterminate:false,
            }
        },
        methods:{
            handleOk(){
                this.$emit('downLoad',this.checkboxData)
            },
            formatData(exportXlsData) {
                this.formData = []
                exportXlsData.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action") {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
                console.log(this.formData)
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action") {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            onCheckAllChange(e,value){
                Object.assign(this, {
                    checkboxData: e.target.checked ? this.formData.map(item=>{return item.dataIndex}) : [],
                    indeterminate: false,
                    checkAll: e.target.checked,
                });
            },
            onChange(checkboxData){
                this.indeterminate = !!this.checkboxData.length && this.checkboxData.length < this.formData.length;;
                this.checkAll = this.checkboxData.length === this.formData.length;
            }
        }
    }
</script>

<style scoped lang="less">
/deep/ .ant-checkbox-wrapper {
    box-sizing: border-box;
    margin: 0px;
    padding: 4px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    display: inline-block;
    line-height: unset;
    cursor: pointer;
}
</style>
